<template>
  <div class="hot-word-content">
    <img src="@/assets/event/hotword-title.png" class="hotword-title" alt="">
    <div class="btn-qushi">
      <img v-if="props.data.length" @click="showDialog" src="@/assets/event/icon-qushi.png" alt="">
    </div>
    <ul class="sidebar">
      <li v-for="(item,index) in props.data" :key="index" @click="wordChange(item,index)" class="flex-between" :class="{'active':activeKey==index}">
        <p class="flex-start">
          <span class="xuhao flex-center">{{index+1}}</span>
          <span>{{item.words}}</span>
        </p>
        <p>
          <span class="freq">{{item.freqThisMonth}}</span>
          <span class="unit"> 次</span>
          <img v-if="item.upOrLow === '上升'" src="@/assets/event/icon-up.png" alt="">
          <img v-else-if="item.upOrLow === '下降'" src="@/assets/event/icon-down.png" alt="">
          <img v-else src="@/assets/event/icon-flat.png" alt="">
        </p>
      </li>
    </ul>
    <div class="word-list" v-if="props.data.length>0">
      <p>共现词汇</p>
      <div class="words-wrap">
        <p v-for="(item,index) in props.data[activeKey].relateWordsList" :key="index" @click="goHotDetail(item)">{{item.words}}</p>
      </div>
    </div>

    <van-overlay v-if="qushiVisible" v-model:show="qushiVisible" @click="onClickHide">
      <TrendPop v-if="qushiVisible" :words="props.data" :wordType="wordKey" @close="onClickHide"/>
    </van-overlay>

  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, onActivated, onMounted } from 'vue'
import TrendPop from "./TrendPop.vue"
import { useRouter } from 'vue-router'
import { useEventStore } from '@/store'
import { storeToRefs } from 'pinia'

defineOptions({
  name: 'HotWord'
})
const eventStore = useEventStore()
const { time, wordType } = storeToRefs(eventStore)

const props = defineProps({
  data: {
    type: Array,
    default: []
  },
  wordKey: {
    type: String,
    default: ""
  }
})
const wordList = ref([])
watch(
  () => props.data,
  (val) => {
    if(val.length>0){
      wordList.value = val;
    }
  }
);

const activeKey = ref(0);
activeKey.value = wordType.value?wordType.value:activeKey.value
const wordChange = (item,index) => {
  activeKey.value = index
  wordType.value = activeKey.value
}

const qushiVisible = ref(false)
const showDialog = () => {
  qushiVisible.value = true
}

const onClickHide = () => {
  qushiVisible.value = false
}

const router = useRouter()
const goHotDetail = (item) => {
  router.push({name: "livelihoodHotWord",query:{
    type: props.wordKey,
    hotWord: props.data[activeKey.value].words,
    words: item.words,
    time: time.value
  }})
}
</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.hot-word-content{
  background: #fff url("@/assets/event/hotword-bg.png") no-repeat center top;
  background-size: 100% 215px;
  margin: 9px 10px 0;
  color: #212121;
  padding: 15px 13px 14px;
  border-radius: 8px;
  position: relative;
  .hotword-title{
    width: 144px;
    height: 15px;
    margin-bottom: 10px;
  }
  .sidebar{
    font-size: 14px;
    line-height: 32px;
    font-weight: 900;
    .xuhao{
      color: #FE8359;;
      width: 19px;
      height: 19px;
      margin: 0 12px 0 9px;
      font-family: DINPro;
      font-weight: 400;
    }
    li{
      min-width: 130px;
      &.active{
        border-radius: 4px;
        background: #FFF5E8;
      }
      &:nth-child(-n+3) .xuhao{
        background: #FE8359;
        border-radius: 50%;
        font-weight: 900;
        color: #fff;
      }
      img{
        width: 10px;
        height: 10px;
        margin: 0 8px 0 15px;
      }
      .freq,.unit{
        font-family: DINPro;
        font-size: 16px;
        font-weight: 400;
        line-height: 32px;
      }
      .unit{
        color: #21212199;
        font-size: 13px;
      }
    }
  }
  .word-list{
    background: url("@/assets/event/word-top-bg.png") no-repeat top center;
    background-size: 329px 6.5px;
    border-radius: 5px;
    width: 100%;
    margin-top: 10px;
    // min-height: 155px;
    >p{
      font-weight: bold;
      font-size: 14px;
      text-align: center;
      padding: 15px 0 17px;
    }
    .words-wrap{
      margin-left: 6px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      p{
        min-width: 62px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        border-radius: 13px;
        background: rgba(255, 146, 25, 0.1);
        color: #FF9219;
        font-weight: bold;
        font-size: 14px;
        margin: 0 5px 10px;
        padding: 0 8px;
      }
    }
  }
  .btn-qushi{
    position: absolute;
    right: 13px;
    top: 10px;
    width: 24px;
    height: 24px;
    box-shadow: 0px 2px 20px 0px #FF921933;
    border-radius: 50%;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .van-overlay{
    z-index: 99;
  }
}
</style>

